<template>
   <div id="bar">
     
   </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(()=>{
    var chartDom = document.getElementById('bar');
var myChart = echarts.init(chartDom);
var option;

option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, '哈尔滨'],
      [57.1, 78254, '桂林'],
      [57.1, 78254, '成都'],
      [57.1, 78254, '成都'],
      [74.4, 41032, '澳门'],
      [50.1, 12755, '香港'],
      [89.7, 20145, '武汉'],
      [68.1, 79146, '上海'],
      [19.6, 91852, '北京'],
      [10.6, 101852, '深圳'],
      [32.7, 20112, '三亚']
    ]
  },
  grid: { containLabel: true },
  xAxis: { name: 'amount' ,show: false},
  yAxis: { type: 'category',
  axisTick: {
        show: false
    }

},
  series: [
    {
      type: 'bar',
      color:'#679cf6', 
      encode: {
        y: 'product'
      },
      itemStyle:{
          color:'#ffa841'
        },
        barWidth:11,
    }
  ]
};

option && myChart.setOption(option);
})
</script>

<style scoped>
#bar{
  margin-top: -50px;
    width: 420px;
    height: 100%;
}
</style>